<template>
  <!-- 表单填写 -->
  <view class="xinguan_form">
    <view class="form_flex">
      <text>姓名</text>
      <input
        type="text"
        v-model="paddingData.name"
        placeholder="请输入姓名"
        placeholder-class="input_place_style"
      />
    </view>

    <view class="form_flex">
      <text>身份证</text>
      <input
        type="idcard"
        v-model="paddingData.id_card"
        placeholder="请输入身份证"
        placeholder-class="input_place_style"
      />
    </view>

    <view class="form_flex">
      <text>手机号</text>
      <input
        type="number"
        v-model="paddingData.phone"
        placeholder="请输入手机号"
        placeholder-class="input_place_style"
      />
    </view>
    <!-- 现居地址 -->
    <view class="form_flex">
      <text>现居地址</text>
      <picker mode="region" class="picker_box" @change="changeAddress">
        <view class="picker_place">
          <text>{{
            submitData.paddingData.address.length !== 0
              ? submitData.paddingData.address
              : "请选择现居地址"
          }}</text>
          <image class="more" src="/static/other/gengduo.svg" />
        </view>
      </picker>
    </view>

    <!-- 详细地址 -->
    <view class="form_flex">
      <text>现居详细地址</text>
      <input
        type="number"
        v-model="paddingData.de_address"
        placeholder="请输入现居详细地址"
        placeholder-class="input_place_style"
      />
    </view>

    <!-- 疫苗人群分类 -->
    <view class="form_flex">
      <text>疫苗人群分类</text>
      <picker
        @change="changePeopleTypeFn"
        mode="selector"
        :range="yimiaoPeopleTypeArr"
        class="picker_box"
      >
        <view class="picker_place">
          <text>{{
            submitData.paddingData.crowd_sort.length !== 0
              ? submitData.paddingData.crowd_sort
              : "请选择疫苗人群分类"
          }}</text>
          <image class="more" src="/static/other/gengduo.svg" />
        </view>
      </picker>
    </view>
  </view>
  <!-- 医院信息 -->
  <view class="card mt14 ml14 mr14 hospital_info">
    <view class="main_title">{{ newTimeData.data.Hospital }}</view>
    <view class="sub_title mt14">{{ newTimeData.data.address }}</view>
    <view class="yimiao_factory mt14">
      <text v-for="(item, index) in newTimeData.data.company" :key="index">{{
        item
      }}</text>
    </view>
  </view>

  <!-- 预约日期 -->
  <view class="card mt14 ml14 mr14 yuyue_date">
    <view
      @click="selectDate(index, item.date)"
      class="yuyue_date_item"
      :class="selectDateIndex === index ? 'active' : ''"
      v-for="(item, index) in newTimeData.data.week"
      :key="index"
    >
      <text>{{ item.day }}</text>
      <text>{{ item.date }}</text>
      <text>{{ item.Have }}</text>
    </view>
  </view>
  <!-- 预约时段 -->
  <view
    class="card mt14 ml14 mr14 yuyue_time_between"
    v-for="(item, index) in newTimeData.data.lasting"
    :key="index"
  >
    <text class="date_shiduan">{{ item.period }}</text>
    <view class="date_time_info">
      <view
        class="date_time_item"
        :class="{ active: `${index}-${index2}` === TimeIndex }"
        v-for="(item2, index2) in item.time"
        :key="index2"
        @click="
          selectTimeBetweeFn({
            key: `${index}-${index2}`,
            period: item.period,
            reserve_time: `${item2.start_time}-${item2.end_time}`,
            when: item2.when,
          })
        "
      >
        <text>{{ item2.start_time }}-{{ item2.end_time }}</text>
        <text>剩余{{ item2.over }}</text>
      </view>
    </view>
  </view>

  <!-- 撑开高度 -->
  <view style="height: 200rpx"></view>
  <!-- 提交按钮 -->
  <view class="submit_btns">
    <text>取消</text>
    <text @click="submitFn">提交预约</text>
  </view>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
import { getNewapptimeApi, submitXinGuanYuYueApi } from "@/http/api";
import type { InewTimeData, optionsDataType } from "@/tsDataType/dataType";
//定义疫苗人群分类数组
const yimiaoPeopleTypeArr = ref([
  "医疗卫生人员",
  "卫生系统内工作的其他人员",
  "因公出国人员",
  "对外劳务派遣人员",
  "留学生",
  "因私出国人员",
  "海关边检人员",
  "公安系统,消防人员",
  "党政机关,事业单位人员",
  "社区工作者",
  "教育工作者",
  "小学和中学学生",
  "其他人员",
]);

//预约新冠时段数据
const newTimeData = reactive<{ data: InewTimeData }>({
  data: {
    Hospital: "",
    address: "",
    company: [],
    lasting: [],
    week: [],
  },
});

//定义要提交的新冠参数
const submitData = reactive({
  paddingData: {
    name: "",
    id_card: "",
    phone: "",
    address: "",
    de_address: "",
    crowd_sort: "",
    date: "",
    period: "",
    reserve_time: "",
    when: 0,
  },
});

const { paddingData } = toRefs(submitData);

//加载新冠预约时段信息
onMounted(() => {
  getNewapptime();
});

//提交新冠预约
const submitFn = async () => {
  try {
    const res = await submitXinGuanYuYueApi(submitData.paddingData);
    console.log("res:::", res);
    //提交成功，跳转到新冠提交订单页面
    uni.navigateTo({
      url: "/pages/my_order/xinguan_order/index",
    });
  } catch (error) {
    //报错信息
    console.log("报错处理");
  }
};

//选择地址方法
const changeAddress = (e: any) => {
  console.log(e);
  submitData.paddingData.address = e.detail.value.join(" ");
};

//选择预约日期方法
const selectDateIndex = ref(-1);
const selectDate = (index: number, date: string) => {
  selectDateIndex.value = index;
  submitData.paddingData.date = date;
};

//选择预约时段方法
const TimeIndex = ref("");
const selectTimeBetweeFn = (options: optionsDataType) => {
  console.log(options.key);
  TimeIndex.value = options.key;
  submitData.paddingData.period = options.period;
  submitData.paddingData.reserve_time = options.reserve_time;
  submitData.paddingData.when = options.when;
};
//选择新冠疫苗人群
const changePeopleTypeFn = (e: any) => {
  console.log(e);
  submitData.paddingData.crowd_sort = yimiaoPeopleTypeArr.value[e.detail.value];
};

const getNewapptime = async () => {
  const res = await getNewapptimeApi();
  console.log("加载新冠预约时段信息:", res);
  newTimeData.data = res.data.data[0];
};
</script>

<style lang="scss">
@import "@/assets/style/public.scss";
@import "@/assets/style/form.scss";
page {
  // padding: 20rpx;
  box-sizing: border-box;
  background: #e4e4e4;
}

//设置高亮样式
.active {
  background: #4677e2 !important;
  color: #fff !important;
}

// 医院信息
.hospital_info {
  .main_title {
    font-weight: bold;
  }
  .yimiao_factory {
    text {
      background: #e4e4e4;
      padding: 4rpx 20rpx;
      margin-right: 8rpx;
      border-radius: 4rpx;
    }
  }
}

// 预约日期
.yuyue_date {
  display: flex;
}
.yuyue_date_item {
  display: flex;
  flex-direction: column;
  background: #e4e4e4;
  padding: 20rpx;
  margin-right: 12px;
  border-radius: 8rpx;
}

.yuyue_time_between {
  display: flex;
  flex-direction: column;
}

.date_shiduan {
  font-weight: bold;
}

.date_time_info {
  display: flex;
}

.date_time_item {
  display: flex;
  flex-direction: column;
  background: #e4e4e4;
  padding: 16rpx;
  border-radius: 8rpx;
  margin-right: 14rpx;
  margin-top: 14rpx;
}

.submit_btns {
  background: #fff;
  padding: 20rpx;
  display: flex;
  justify-content: space-around;
  text {
    padding: 14rpx 30rpx;
    border-radius: 8rpx;
    width: 200rpx;
    text-align: center;

    &:nth-of-type(1) {
      background: #ecf2fd;
      color: #5972c6;
    }

    &:nth-of-type(2) {
      background: #4677e2;
      color: #fff;
    }
  }
}
</style>
